<template>
  <div class="gb-radio-group">
    <div v-for="(item, index) in options" :class="{'gb-radio-item-selected':item.value === model}" :key="index"
         class="gb-radio-item">
      <input
          type="radio"
          :id="`radio-${index}`"
          :value="item.value"
          :checked="item.value === model"
          @change="onChange"
      />
      <label :for="`radio-${index}`" class="gb-radio-label">
        {{ item.label }}
      </label>
    </div>
  </div>
</template>

<script>
/**
 * 单选
 */
export default {
  name: 'GbRadioGroup',
  props: {
    options: {
      type: Array,
      required: true,
    },
    model: {
      type: String,
      default: '',
    },
  },
  emits: ['change'],
  methods: {
    onChange(event) {
      const targetValue = event.target.value;
      this.$emit('change', targetValue);
    },
  },
};
</script>

<style lang="scss" scoped>
.gb-radio-group {
  flex: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 26px;
  border-radius: 14px;
  background: rgba(248, 248, 248, 1);

  .gb-radio-item-selected {
    background: rgba(232, 72, 56, 1);

    .gb-radio-label {
      color: #fff;
    }
  }

  .gb-radio-item {
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    mix-blend-mode: normal;
    border-radius: 14px;

    input[type=radio] {
      display: none;
    }
  }

  .gb-radio-label {
    margin-left: 0px;
    height: 14px;
    mix-blend-mode: normal;
    color: rgba(108, 110, 122, 1);
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 13px;
    line-height: 14px;
  }
}

</style>